<template>
  <ul class="content-item--wrap">
    <li
      class="content-item"
      @click="toRoute(12342)"
    >
      <p class="content-item__title">标题</p>
      <p class="content-item__content">部分内容，部分内容，部分内容，部分内容文字限制到50字部分内容文字限制到50字部分内容文字限制到50字部分内容文字限制到50字部分内容文字限制到50字部分内容文字限制到50字部分内容文字限制到50字</p>
      <p class="content-item__time">2019.10.01</p>
      <p style="color: #1989fa">详情</p>
    </li>
  </ul>
</template>

<script>
export default {
  methods: {
    toRoute(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content-item--wrap {
  .content-item {
    margin: 0 20px;
    border-bottom: 1px solid rgba(134, 133, 133, 0.1);
    padding: 20px 0 10px;

    &__title {
      color: #000;
      font-weight: bolder;
      font-size: 16px;
    }

    &__content,
    &__time {
      color: rgb(102, 98, 98);
      line-height: 16px;
      font-size: 13px;
      font-family: Arial, Helvetica, sans-serif;
    }

    &__content {
      margin: 16px 0 8px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      line-height: 20px;
    }
  }
}
</style>
